<template>
  <div style="margin-top: 20px;margin-bottom: 20px">
    <el-radio-group v-model="type" size="large">
      <el-radio-button label="买入"/>
      <el-radio-button label="卖出"/>
    </el-radio-group>
  </div>
  <div v-if="type==='买入'">
    <el-row>
      <el-col :span="8">
        <el-form :model="TradeData" label-width="120px">
          <el-form-item label="证券代码" @keyup.enter="enter">
            <el-input v-model="TradeData.code" placeholder="sh600853"/>
          </el-form-item>
          <el-form-item label="当前价格">
            {{ TradeData.price }}
          </el-form-item>
          <el-form-item label="买入数量">
            <el-input-number v-model="TradeData.number" :min="0"  :step="100" step-strictly/>
          </el-form-item>
          <el-form-item label="总金额">
            {{ (TradeData.price * TradeData.number).toFixed(2) }}
          </el-form-item>
          <el-form-item label="可用资金">
            {{capitalData.可用资金}}
          </el-form-item>
          <el-button @click="clickBuy">买入下单</el-button>
        </el-form>
      </el-col>
      <el-col :span="4"></el-col>
      <el-col :span="6">
        <el-form :model="stockData" label-width="120px">
          <el-form-item label="">
            <el-card>
              <div style="font-size: 50px">{{stockData.现价}}</div>
              <div v-if="ratio>0" style="font-size: 30px; color:red">+{{ratio}}%</div>
              <div v-else style="font-size: 30px; color:green">{{ratio}}%</div>
              <div style="font-size: 30px ">{{ stockData.证券简称 }}</div>
            </el-card>
          </el-form-item>
          <el-form-item label="现价">{{ stockData.现价 }}
          </el-form-item>
          <el-form-item label="今开">{{ stockData.今开 }}
          </el-form-item>
          <el-form-item label="昨收">{{ stockData.昨收 }}
          </el-form-item>
          <el-form-item label="最高">{{ stockData.最高 }}
          </el-form-item>
          <el-form-item label="最低">{{ stockData.最低 }}
          </el-form-item>
          <el-form-item label="成交量">{{ stockData.成交量 }}
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
  <div v-if="type==='卖出'">
    <el-row>
      <el-col :span="8">
        <el-form :model="TradeData" label-width="120px">
          <el-form-item label="证券代码">
            <el-input v-model="TradeData.code" @keyup.enter="enter"/>
          </el-form-item>
          <el-form-item label="当前价格">
            {{ TradeData.price }}
          </el-form-item>
          <el-form-item label="可用数量">
            {{availableStockNumber}}
          </el-form-item>
          <el-form-item label="卖出数量">
            <el-input-number v-model="TradeData.number" :min="0"  :precision="0" :step="100" />
          </el-form-item>
          <el-form-item label="总金额">
            {{ (TradeData.price * TradeData.number).toFixed(2) }}
          </el-form-item>
          <el-button @click="clickSell">卖出下单</el-button>
        </el-form>
      </el-col>
      <el-col :span="4"></el-col>
      <el-col :span="6">
        <el-form :model="stockData" label-width="120px">
          <el-form-item label="">
            <el-card>
              <div style="font-size: 50px">{{stockData.现价}}</div>
              <div v-if="ratio>0" style="font-size: 30px; color:red">+{{ratio}}%</div>
              <div v-else style="font-size: 30px; color:green">{{ratio}}%</div>
              <div style="font-size: 30px ">{{ stockData.证券简称 }}</div>
            </el-card>
          </el-form-item>
          <el-form-item label="现价">{{ stockData.现价 }}
          </el-form-item>
          <el-form-item label="今开">{{ stockData.今开 }}
          </el-form-item>
          <el-form-item label="昨收">{{ stockData.昨收 }}
          </el-form-item>
          <el-form-item label="最高">{{ stockData.最高 }}
          </el-form-item>
          <el-form-item label="最低">{{ stockData.最低 }}
          </el-form-item>
          <el-form-item label="成交量">{{ stockData.成交量 }}
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="js" src="./Trade.js"></script>

<style scoped>

</style>
